<template>
  <el-menu default-active="2" active-text-color="#ffd04b" background-color="#545c64" text-color="#fff"
    :unique-opened="true" class="menu-main" router>
    <!-- 根目录循环 -->
    <template v-for="menu in menus" :key="menu.index">
      <!-- 一级目录 -->
      <el-menu-item v-if="!menu.children" :index="menu.path">
        <template #title>
          <el-icon>
            <component :is="menu.icon" />
          </el-icon>
          <span>{{ menu.title }}</span>
        </template>
      </el-menu-item>
      <el-sub-menu v-else :index="menu.index">
        <template #title>
          <el-icon>
            <component :is="menu.icon" />
          </el-icon>
          <span>{{ menu.title }}</span>
        </template>
        <!-- 二级目录 -->
        <template v-for="subMenu in menu.children" :key="subMenu.index">
          <el-menu-item v-if="!subMenu.children" :index="subMenu.path">
            <template #title>
              <el-icon>
                <component :is="subMenu.icon" />
              </el-icon>
              <span>{{ subMenu.title }}</span>
            </template>
          </el-menu-item>
          <el-sub-menu v-else :index="subMenu.index">
            <template #title>
              <el-icon>
                <component :is="subMenu.icon" />
              </el-icon>
              <span>{{ subMenu.title }}</span>
            </template>
            <!-- 三级目录 -->
            <template v-for="threeSubMenu in subMenu.children" :key="threeSubMenu.index"> 
              <el-menu-item v-if="!threeSubMenu.children" :index="threeSubMenu.path">
                <template #title>
                  <el-icon>
                    <component :is="threeSubMenu.icon" />
                  </el-icon>
                  <span>{{ threeSubMenu.title }}</span>
                </template>
              </el-menu-item>
              <el-sub-menu v-else :index="threeSubMenu.index">
                <template #title>
                  <el-icon>
                    <component :is="threeSubMenu.icon" />
                  </el-icon>
                  <span>{{ threeSubMenu.title }}</span>
                </template>
                <!-- 四级目录（最后一级，只能是导航，不能是目录） -->
                <el-menu-item v-for="fourSubMenu in threeSubMenu.children" :key="fourSubMenu.index" :index="fourSubMenu.path">
                  <template #title>
                    <el-icon>
                      <component :is="fourSubMenu.icon" />
                    </el-icon>
                    <span>{{ fourSubMenu.title }}</span>
                  </template>
                </el-menu-item>
              </el-sub-menu>
            </template>
          </el-sub-menu>
        </template>
      </el-sub-menu>
    </template>
  </el-menu>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import request from '../../../utils/request'

interface MenuItem {
  index: string
  title: string
  icon: string
  path: string
  children?: MenuItem[]
}

const menus = ref<MenuItem[]>([])

const getNavTree = () => {
  return request.get('/nav/navTree').then((res: HttpResult) => {
    const userNav: any = res.data
    const navTree = userNav.NAV_TREE_LIST;
    return navTree;
  })
}

onMounted(() => {
  getNavTree().then((navTree: any) => {
    menus.value = navTree
  })
})

</script>

<style scoped lang="less"></style>
